<template>
    <div id="details">
        <h1>{{data.name}}<span class="float-right"><router-link class="btn btn-outline-secondary btn-sm" tag="button" :to="`/edit/${data.id}`">编辑</router-link><button class="btn btn-outline-danger btn-sm ml-1" type="button" @click="onDelete">删除</button></span></h1>
        <ul class="list-group mt-4">
            <li class="list-group-item">手机：{{data.mobilephone}}</li>
            <li class="list-group-item">邮箱：{{data.email}}</li>
            <li class="list-group-item">学历：{{data.education}}</li>
            <li class="list-group-item">毕业学校：{{data.school}}</li>
            <li class="list-group-item">职业：{{data.occupation}}</li>
            <li class="list-group-item">个人简介：{{data.introduction}}</li>
        </ul>
    </div>
</template>

<script>
    export default {
        name: "Details",
        data() {
            return {
                id: this.$route.params.id,
                data: {}
            }
        },
        methods: {
            onDelete() {
                this.axios({
                    method: "DELETE",
                    url: `http://localhost:3000/user/${this.id}`
                }).then(response => {
                    document.getElementById("message").innerHTML=`<div class="alert alert-danger alert-dismissible fade show" role="alert">删除用户成功！<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button></div>`;
                    this.$router.push({name: "Home"});
                }).catch(error => console.log(error))
            }
        },
        created() {
            this.axios.get(`http://localhost:3000/user/${this.id}`).then(response => this.data = response.data).catch(error => console.log(error))
        }
    }
</script>

<style scoped>
    h1 {border-bottom: 1px solid rgba(0,0,0,.125);padding-bottom: 4px;}
</style>